<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/css/upload.css" rel="stylesheet" th:href="@{/css/upload.css}" />
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
						<input id="linkContentId" name="linkContentId" th:value="${linkContent.linkContentId}"  type="hidden">
							<div class="form-group">	
								<label class="col-sm-3 control-label">溯源环节细节名称：</label>
								<div class="col-sm-8">
									<input id="contentName" name="contentName" th:value="${linkContent.contentName}" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">类型：</label>
								<div class="col-sm-8">
									<input id="type" type="radio" name="type" value="0" />
									<span>文本</span>
									<input id="type2" type="radio" name="type" value="1" />
									<span>图片</span>
								</div>
							</div>
														<div class="form-group">
								<label class="col-sm-3 control-label">默认值：</label>
								<div class="col-sm-8">
									<input id="defaultValue" name="defaultValue" th:value="${linkContent.defaultValue}" class="form-control" type="text">
									<div class="loads" style="display:none;">
										<ul class="evimg">
											<span class="imgArray">
                                              <!-- <li class="loads" th:each="pic:${pics}">
													<img class="img" src="img/uploadfile.png" th:src="${pic}" th:value="${pic}">
													<span class="delete" onclick="delThis(this)">X</span>
										       </li>-->
											</span>
											<li class="load">
												<img src="img/uploadfile.png" th:src="@{/img/uploadfile.png}">
												<input type="file" name="defaultValue" class="upload" id="upload" onchange="readFile(this)">
											</li>
										</ul>
									</div>
								</div>
							</div>
														<div class="form-group">	
								<label class="col-sm-3 control-label">排序：</label>
								<div class="col-sm-8">
									<input id="sort" name="sort" th:value="${linkContent.sort}" class="form-control"  placeholder="数值越小越靠前" type="text">
								</div>
							</div>
														<div style="display: none" class="form-group">
								<label class="col-sm-3 control-label">是否显示：</label>
								<div class="col-sm-8">
									<select id="isView" name="isView" th:value="${linkContent.isView}" class="form-control">

									</select>
								</div>
							</div>
							<input id="proceduresLinkId" name="proceduresLinkId" th:value="${linkContent.proceduresLinkId}" type="hidden">
																					<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
									<input type="button" class="btn btn-danger" value="取消"
										   onclick="javascript:
											var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
				                            parent.layer.close(index);">
									</input>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript" th:inline="javascript">
        function isView(){
        	var type = [[${linkContent.type}]];
			if (type == 0){
				$("#type").prop("checked",true);
			}else {
				$("#type2").prop("checked",true);
				$("#defaultValue").hide();
				$(".loads").show();
			}


            var isView =[[${linkContent.isView}]]
            if (isView == 0){
                $("#isView").append("<option  value='1'>是 </option>");
                $("#isView").append("<option selected = 'selected'  value='0'>否 </option>");
            }else{
                $("#isView").append("<option selected = 'selected' value='1'>是 </option>");
                $("#isView").append("<option  value='0'>否 </option>");
            }
        }

		$(":radio").bind("click",function () {

			if ($(this).val()==1){
				$("#defaultValue").hide();
				$(".loads").show();
			}else if ($(this).val()==0){
				$("#defaultValue").show();
				$(".loads").hide();
			}
		})

		//读取图片
		function readFile(obj) {
			var file = obj.files[0];
			//限定上传文件的类型，判断是否是图片类型
			if (!/image\/\w+/.test(file.type)) {
				alert("只能选择图片");
				return false;
			}

			var size=obj.files[0].size
			//console.log(size,"字节")
			var reader = new FileReader();
			var html="";
			reader.readAsDataURL(file);
			reader.onload = function (e) {
				//console.log(this.result.split("base64,")[1]);
				var base64=this.result;
				console.log("压缩前的文件流大小："+base64.length);

				//压缩
				dealImage(base64,500,function (base64Codes) {

					var arr = base64Codes.split(','),
							mime = arr[0].match(/:(.*?);/)[1],
							len = mime.length;
					var subLen = parseInt(len + 13);
					$base64 = base64Codes.substring(subLen);
					var $fileSize = fileSize($base64)
					console.log("压缩后的文件流大小：" + $fileSize)

					html+='<li><img src="'+base64Codes+'" onclick="showImg(this)" data-size="'+$fileSize+'"><span class="delete" onclick="delThis(this)">X</span></li>'
					$(obj).parent().parent().find(".imgArray").append(html);
				})
			}
		}

		//压缩方法
		function dealImage(base64, w, callback) {
			var newImage = new Image();
			var quality = 0.6;    //压缩系数0-1之间
			newImage.src = base64;
			newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
			var imgWidth, imgHeight;
			newImage.onload = function () {
				imgWidth = this.width;
				imgHeight = this.height;
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext("2d");
				if (Math.max(imgWidth, imgHeight) > w) {
					if (imgWidth > imgHeight) {
						canvas.width = w;
						canvas.height = w * imgHeight / imgWidth;
					} else {
						canvas.height = w;
						canvas.width = w * imgWidth / imgHeight;
					}
				} else {
					canvas.width = imgWidth;
					canvas.height = imgHeight;
					quality = 0.6;
				}
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
				var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
				// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
				// while (base64.length / 1024 > 150) {
				// 	quality -= 0.01;
				// 	base64 = canvas.toDataURL("image/jpeg", quality);
				// }
				// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
				// while (base64.length / 1024 < 50) {
				// 	quality += 0.001;
				// 	base64 = canvas.toDataURL("image/jpeg", quality);
				// }
				callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
			}
		}

		//通过base64编码字符流计算文件流大小函数
		function fileSize(str) {
			var fileSize;
			//找到等号，把等号也去掉
			if (str.indexOf('=') > 0) {
				var indexOf = str.indexOf('=');
				str = str.substring(0, indexOf);//把末尾的’=‘号去掉
			}
			fileSize = parseInt(str.length - (str.length / 8) * 2);
			return fileSize;
		}

		//删除图片
		function delThis(obj){
			var add=$(obj).parent().parent().parent().find(".load")
			$(obj).parent().remove()
		}
	</script>
	<script type="text/javascript" th:src="@{/js/appjs/procedures/linkContent/edit.js}" src="/js/appjs/procedures/linkContent/edit.js"> </script>

</body>
</html>
